<template>
  <div>
    <div v-if="isPageShow" class="wrap">
      <!-- header头部 -->
      <!-- <m-header
        :backcolor="'#1968FA'"
        :color="'#fff'"
        opacity="1"
        hocolor="#fff"
        filter="blur(0px)"
      ></m-header> -->
      <div style="height: 50px"></div>
      <div class="container" style="width:100%;max-width:1200px">
        <div class="content">
          <div class="right-box">
            <!-- menu栏 -->
            <m-Menu activeDefault="3"></m-Menu>
            <!--  -->
          </div>

          <div
            class="left-box"
            style="min-height: 400px"
            v-loading="$store.state.isLoading"
          >
            <div
              style="
                position: absolute;
                top: -32px;
                display: flex;
                align-items: center;
              "
            >
              <i
                v-if="$store.state.userData.type"
                class="el-icon-back"
                style="font-size: 30px; margin-right: 10px; cursor: pointer"
                @click="$router.push('/teacherrecord')"
              ></i>
              练习记录/{{ $store.state.userData.uname }}
            </div>
            <div class="con-box">
              <div
                v-for="item in tableData"
                :key="item.topicType"
                class="wr-box"
              >
                <div v-if="item.topicType == 0" class="wr-left">
                  <img
                    src="../../assets/images/danxuant.png"
                    alt=""
                    style="width: 40px; margin-right: 8px"
                  />
                  <div>单选题</div>
                </div>
                <div v-if="item.topicType == 1" class="wr-left">
                  <img
                    src="../../assets/images/duoxuant.png"
                    alt=""
                    style="width: 40px; margin-right: 8px"
                  />
                  <div>多选题</div>
                </div>
                <div v-if="item.topicType == 2" class="wr-left">
                  <img
                    src="../../assets/images/panduant.png"
                    alt=""
                    style="width: 40px; margin-right: 8px"
                  />
                  <div>判断题</div>
                </div>
                <div class="wr-right">
                  <div style="color: #333">共{{ item.wrongCount }}题</div>
                  <div style="margin-right: 25px">
                    <el-button
                      round
                      @click="handleGoUrl(item.topicType, 'wrongBanklo')"
                      >查看答案</el-button
                    >
                    <el-button
                      round
                      @click="handleGoUrl(item.topicType, 'wrongBankex')"
                      >错题练习</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div slot="empty" class="empty" v-if="tableData.length == 0">
              <img src="../../assets/images/empty.png" alt="" />
              <span class="text"> 暂无数据 </span>
            </div>
          </div>
        </div>
      </div>
      <!-- footer页脚 -->
      <!-- <m-fotter /> -->
    </div>
  </div>
</template>

<script>
import { getUserStatistic } from "@/api/personalCenter";
import { STATUS_CODE_OK } from "@/config";
// import MHeader from "@/components/MHeader.vue";
// import MFotter from "@/components/MFotter.vue";
import MMenu from "@/components/MMenu.vue";
export default {
  name: "StudentRecord",
  data() {
    return {
      isPageShow: true, //页面是否显示
      dataList: {},
      studentName: "",
      tableData: [],
    };
  },
  async created() {
    await this.handleGetData();
    sessionStorage.setItem("goback", this.$route.fullPath);
    this.handleGetUserStatistic();
  },
  methods: {
    // 跳转考试页面
    handleGoUrl(item, urlName) {
      this.$router.push({
        name: urlName,
        query: { row: item },
      });
    },
    // 获取本地基本详情数据
    handleGetData() {
      // 刷新浏览器数据不丢失不覆盖
      if (this.$route.params.row) {
        sessionStorage.setItem(
          "studentRecord",
          JSON.stringify(this.$route.params.row)
        );
      }
      if (sessionStorage.getItem("studentRecord")) {
        this.dataList = JSON.parse(sessionStorage.getItem("studentRecord"));
      }
    },
    // 获取个人学习记录
    async handleGetUserStatistic() {
      let { data } = await getUserStatistic();
      if (data.code == STATUS_CODE_OK) {
        this.tableData = data.data;
      }
    },
  },
  components: {
    // MHeader,
    // MFotter,
    MMenu,
  },
};
</script>

<style scoped lang="scss">
$bg-color: #fff;
::v-deep .el-divider--horizontal {
  margin: 20px 0;
}
::v-deep .el-button {
  border: 1px solid #409eff;
  border-color: #409eff;
  color: #409eff;
}
::v-deep .el-menu {
  min-height: 600px;
}
.empty {
  display: flex;
  padding: 30px;
  height: 430px;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  img {
    width: 250px;
    height: 250px;
  }
}

.dialog-box {
  .pdf-box {
    overflow-y: auto;
    max-height: 600px;
    display: flex;
    width: 600px;
    flex-direction: column;
    align-items: center;
    .pdf {
      width: 100%;
      border: 1px solid #000;
      margin-bottom: 10px;
    }
  }
  .dialog-video {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
}
.wrap {
  background-color: $bg-color;
  .container {
    padding-bottom: 90px;
    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .right-box {
        flex: 0.2;
        .el-menu {
          border-right: none;
          border-radius: 10px 10px 10px 10px;
        }
      }
      .left-box {
        .title {
          padding: 10px 0px 0px 0px;
        }
        position: relative;
        flex: 0.8;
        margin: 36px 0px 0px 20px;
        padding: 0px 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px 10px 10px 10px;
        .con-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: column;
          margin-top: 10px;
          .wr-box {
            display: flex;
            justify-content: space-between;
            width: 96%;
            border-radius: 12px;
            border: 1px solid #dce1e5;
            margin-bottom: 20px;
            .wr-left {
              display: flex;
              align-items: center;
              background: #3278fa;
              border-radius: 12px 0px 0px 12px;
              color: #fff;
              padding: 7px 50px;
            }
            .wr-right {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 74%;
            }
          }
        }
      }
    }
  }
}
</style>
